<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>响应式布局</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./css/all.css">
    <style>
        *{
            margin: 0;
            padding: 0;
        }

        .top-bar{
            position: relative;
            display: flex;
            height: 60px;
            background-color: black;
            color: white;
            align-items: center;
            padding: 0 40px;
        }

        .top-bar h1{
            height: 34px;
        }

        .top-bar h1 a svg{
            width: 34px;
            height: 34px;
        }

        .top-bar .space{
            flex: auto;
        }

        .top-bar .user-info{
            margin-right: 40px;
        }

        .user-info .login-register{
            display: none;
            justify-content: center;
            align-items: center;
            position: absolute;
            height: 60px;
            width: 100%;
            background-color: #000;
            left: 0;
            top: 60px;
        }

        .user-info:active .login-register{
            display: flex;
        }

        .user-info .login-register::before{
            content: "";
            position: absolute;
            width: 90%;
            height: 1px;
            background-color: #333;
            top: 0;
        }


        .user-info .login-register a{
            flex: auto;
            text-decoration: none;
            text-align: center;
            color: #fff;
        }

        .menu .menu-inner{
            list-style: none;
            display: none;
            position: absolute;
            width: 100%;
            top:60px;
            left: 0;
            background-color: black;
        }
        .menu:active .menu-inner{
            display: block;
        }


        .menu .menu-inner::before{
            content: "";
            position: absolute;
            width: 90%;
            height: 1px;
            background-color: #333;
            top: 0;
            left: 0;
            right: 0;
            margin: 0 auto;

        }

        .menu .menu-inner a {
            display: flex;
            text-decoration: none;
            padding: 32px 0;
            align-items: center;
            font-size: 24px;
            justify-content: space-between;
            color: #fff;
            margin: 0 40px;
        }
        
        
        @media (min-width: 880px) {
            .menu i,
            .user-info i{
                display: none;
            }

            .top-bar .user-info .login-register{
                display: flex;
            }

            .user-info .login-register{
                justify-content: center;
                align-items: center;
                position: static;
                height: auto;
                width: auto;
                font-size: 14px;
                font-weight: bold;
            }

            .user-info .login-register a:hover{
                color: #ff6700;
            }


            .top-bar .menu .menu-inner{
                display: flex;
                position: static;
                width: auto;
                background-color: black;
            }

            .menu .menu-inner a {
                display: block;
                font-weight: bold;
                font-size: 14px;
                margin: 0;
                padding: 0;
            }

            .menu .menu-inner a:hover{
                color: #ff6700;
            }

            .top-bar{
                justify-content: space-around;
            }

            .top-bar .space{
                display: none;
            }

            .top-bar .menu{
                order: 2;
            }

            .top-bar .user-info{
                order: 3;
            }

            .top-bar .menu a,
            .top-bar .user-info a{
                margin: 0 10px;
            }
        }


    </style>
</head>
<body>

<!--
    响应式布局
        - 指网页会根据窗口大小的改变而改变
        - 响应式布局，可以使得一个页面同时在多种设备中使用，并且有一个较好的体验！
            降低我们开发的成本。
        - 但是这种响应式页面，适合内容比较简单的页面，
            如果是内容多的，布局复杂的页面还是建议pc端一套，移动端一套
        - 响应式布局主要就是借助媒体查询来实现的
        - 编写的原则：
            1. 移动优先
            2. 渐进增强
                - 确认断点
-->

<header class="top-bar">
    <h1>
        <a href="#">
            <svg data-v-777bda80="" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 808 808" class="mi-logo"><g data-v-777bda80=""><path data-v-777bda80="" fill="#ff6900" d="M723.79,84.42C647.55,8.48,537.94,0,404,0,269.89,0,160.12,8.58,83.92,84.72S0,270.43,0,404.39,7.74,648,84,724.14,269.9,808,404,808s243.85-7.71,320-83.86,84-185.78,84-319.75C808,270.25,800.16,160.54,723.79,84.42Z"></path> <path data-v-777bda80="" fill="#fff" d="M374.26,553.72a5,5,0,0,1-5.06,5H300.3a5.05,5.05,0,0,1-5.12-5V373.53a5.05,5.05,0,0,1,5.12-5h68.9a5,5,0,0,1,5.06,5Z"></path> <path data-v-777bda80="" fill="#fff" d="M509.18,553.72a5.05,5.05,0,0,1-5.09,5H438.5a5,5,0,0,1-5.1-5V398.26c-.07-27.15-1.62-55-15.64-69.06-12-12.09-34.51-14.86-57.88-15.44H241a5,5,0,0,0-5.07,5v235a5.07,5.07,0,0,1-5.12,5H165.16a5,5,0,0,1-5.06-5V254.31a5,5,0,0,1,5.06-5H354.52c49.49,0,101.22,2.26,126.74,27.81s27.92,77.3,27.92,126.85Z"></path> <path data-v-777bda80="" fill="#fff" d="M644.29,553.72a5.06,5.06,0,0,1-5.09,5H573.57a5,5,0,0,1-5.08-5V254.31a5,5,0,0,1,5.08-5H639.2a5.06,5.06,0,0,1,5.09,5Z"></path></g></svg>
        </a>
    </h1>
    <div class="space"></div>
    <div class="user-info">
        <i class="fa-solid fa-user"></i>
<!--        创建一个隐藏层-->
        <div class="login-register">
            <a href="#">登录</a>
            <span class="line">|</span>
            <a href="#">注册</a>
        </div>
    </div>
    <div class="menu">
        <i class="fa-solid fa-bars"></i>
        <ul class="menu-inner">
            <li>
                <a href="#">
                    <span>小米官网</span>
                    <i class="fa-solid fa-angle-right"></i>
                </a>
            </li>
            <li>
                <a href="#">
                    <span>MIUI</span>
                    <i class="fa-solid fa-angle-right"></i>
                </a>
            </li>
            <li>
                <a href="#">
                    <span>loT</span>
                    <i class="fa-solid fa-angle-right"></i>
                </a>
            </li>
            <li>
                <a href="#">
                    <span>云服务</span>
                    <i class="fa-solid fa-angle-right"></i>
                </a>
            </li>
            <li>
                <a href="#">
                    <span>天星数科</span>
                    <i class="fa-solid fa-angle-right"></i>
                </a>
            </li>
            <li>
                <a href="#">
                    <span>有品</span>
                    <i class="fa-solid fa-angle-right"></i>
                </a>
            </li>
            <li>
                <a href="#">
                    <span>小爱开放平台</span>
                    <i class="fa-solid fa-angle-right"></i>
                </a>
            </li>
            <li>
                <a href="#">
                    <span>企业团购</span>
                    <i class="fa-solid fa-angle-right"></i>
                </a>
            </li>
            <li>
                <a href="#">
                    <span>Location</span>
                    <i class="fa-solid fa-angle-right"></i>
                </a>
            </li>

        </ul>
    </div>
</header>

</body>
</html>